<template>
  <div>
    <component-a v-slot:b="foo">
      <component-b :value="foo.value" v-slot:c="bar">
        <!-- <component-b v-bind="foo" v-slot:c="bar"> -->
        <!-- <component-c v-bind="{ ...bar, valueA: foo }">{{ test }}</component-c> -->
        <component-c v-bind="{ ...bar, valueA: foo.value }">{{ test }}</component-c>
      </component-b>
    </component-a>
  </div>
</template>
<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
import ComponentC from './ComponentC.vue';

export default {
  components: {
    ComponentA, ComponentB, ComponentC
  },
  data: () => ({
    test: 'this is a test'
  })
}
</script>
<style lang="">

</style>